<template>
	<view class="wrap"
		:style="colorStyle">
		<view class="w-full bg-top h-470 relative">
			<view class="fixed-lt w-full z-20"
				:style="{'padding-top': sysHeight + 'px'}">
				<view class="w-full px-20 pl-20 h-80 flex-between-center">
					<!-- #ifdef MP-WEIXIN -->
					<text class="iconfont icon-ic_leftarrow fs-40 text&#45;&#45;w111-fff"
						@click="goBack()"></text>
					<!-- #endif -->
					<!-- <text class="fs-34 fw-500 text--w111-000">客服</text> -->
					<text></text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="head">
				<view class="title">
					<view class="fs-50 Regular">Hi~您好</view>
					<view class="fs-24 mt-16 text--w111-999">很高兴为你服务~</view>
				</view>
				<image class="bg w-full"
					src="https://qn.ebaozu.cn/public/mini/kefu/%E5%AE%A2%E6%9C%8D%E4%B8%AD%E5%BF%83%E8%83%8C%E6%99%AF.jpg"
					mode="widthFix"></image>
			</view>
			<view class="cont relative">
				<view class="chat-box">
					<view class="item mr-20"
						@click="callPhone">
						<image src="https://qn.ebaozu.cn/public/mini/kefu/%E5%AE%A2%E6%9C%8D%E7%94%B5%E8%AF%9D.png"
							class="l"></image>
						<view class="c">
							<view>客服电话</view>
							<view class="fs-mini text--w111-999 mt-6">
								拨打客服热线
							</view>
						</view>
						<text class="iconfont icon-ic_rightarrow fs-24 text--w111-999 pl-8"></text>
					</view>
					<view class="item"
						@click="toChat"
						v-if="customer_type!=1">
						<image src="https://qn.ebaozu.cn/public/mini/kefu/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D.png"
							class="l"></image>
						<view class="c">
							<view>在线客服</view>
							<view class="fs-mini text--w111-999 mt-6">实时与您沟通</view>
						</view>
						<text class="iconfont icon-ic_rightarrow fs-24 text--w111-999 pl-8"></text>
						<!--            蚂蚁智能客服-->
						<alipayChat v-if="customer_type==3"></alipayChat>
					</view>
				</view>
				<view class="fs-regular mb-32 text--w111-999 text-center"
					v-if="service.service_time.start_time">{{service.service_time.start_time}}</view>

				<!--        <view class="tab-box-public">-->
				<!--          <view @click="changeTab(item)" :class="{'tab-active':item.category_id==tabId}" class="tab-item" v-for="(item,index) in tabList" :key="index">-->
				<!--            <image v-if="item.category_image" class="tab-img" :src="item.category_image"></image>-->
				<!--            <view>{{ item.category_name }}</view>-->
				<!--          </view>-->
				<!--        </view>-->
				<!--        <view class="detail-box">-->
				<!--          <uni-collapse>-->
				<!--            <uni-collapse-item v-for="(item,index) in nowDetail" :key="index" :title="item.title" :show-animation="true">-->
				<!--              <view class="detail-con fs-24">-->
				<!--                <mp-html :preview-img="false" :selectable="false" :content="item.content" />-->
				<!--              </view>-->
				<!--            </uni-collapse-item>-->
				<!--          </uni-collapse>-->
				<!--        </view>-->
				<publicFAQ></publicFAQ>
			</view>

		</view>
		<pageFooter @newDataStatus="newDataStatus"
			v-show="showBar"></pageFooter>
	</view>
</template>

<script>
	import alipayChat from "@/components/alipayChat/index.vue";
	import { mapGetters } from "vuex";
	import colors from "@/mixins/color";
	import { customerType } from '@/api/api.js';
	import { getHelpInfo } from "@/api/kefu";
	import { _toLogin } from "@/libs/login";
	import pageFooter from "@/components/pageFooter/index.vue";
	import publicFAQ from "@/pages/extension/customer/publicFAQ.vue"
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		mixins: [colors],
		components: {
			publicFAQ,
			pageFooter,
			alipayChat
		},
		data() {
			return {
				name: '',
				info: null,
				sysHeight: sysHeight,
				tabList: [],
				tabId: '',
				detailList: [],
				nowDetail: [],
				service: {},
				customer_type: '',

				isFooter: false,
				showBar: false,
				pdHeight: 0,
				chat: {}
			};
		},
		onShow() {
			this.getHelpInfo()
		},
		// computed: mapGetters(['userInfo']),
		computed: {
			...mapGetters(['userInfo']),
			service_num() {
				if (this.userInfo.length > 0) {
					let userInfo = JSON.parse(this.userInfo)
					return userInfo?.service_num
				}
			}
		},
		methods: {
			getHelpInfo() {
				getHelpInfo({
					flag: 'all'
				}).then(res => {
					this.tabList = res.data.category
					this.detailList = res.data.detail
					this.changeTab(res.data.category[0])
					this.service = res.data.service
					this.customer_type = res.data.customer_type
					this.chat = res.data.chat
				})
			},
			changeTab(tab) {
				this.tabId = tab.category_id
				let now_detail = this.detailList.find(item => item.category_id == this.tabId)
				this.nowDetail = now_detail.detail ? now_detail.detail : []
			},



			goBack() {
				uni.navigateBack();
			},
			callPhone() {
				let that = this
				// 对话框，是否拨打电话
				uni.showModal({
					title: '是否拨打客服电话？',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: that.service.service_phone,
								complete: (res) => {
									console.log(res);
								}
							});
						}
					}
				});
			},
			toChat() {
				// 蚂蚁客服
				if (this.customer_type == 3) return
				// 循环经济智能助理客服
				if (this.customer_type == 4) {
					const targetUrl = this.chat.service_url;
					my.ap.openURL({
						"url": targetUrl,
						"fail": (res) => {
							my.showToast({
								content: '跳转失败'
							});
						}
					});
					return
				}
				let userInfo = {}
				if (typeof this.userInfo === 'string') {
					userInfo = JSON.parse(this.userInfo)
				} else {
					userInfo = this.userInfo
				}
				let url = `/pages/extension/customer_list/chat?productId=${this.id}`
				this.$util.getCustomer(userInfo, url)
			},

			newDataStatus(val, num) {
				this.isFooter = val ? true : false;
				this.showBar = val ? true : false;
				this.pdHeight = num;
			},
		},

		onShareAppMessage() {
			let uid = this.userInfo.uid ? this.userInfo.uid : 0;
			return {
				title: '途安车服',
				path: '/pages/index/index?spid=' + uid
			};
		},
	}
</script>

<style lang="scss"
	scoped>
	.content {}

	.head {
		position: relative;

		.title {
			position: absolute;
			top: 220rpx;
			left: 30rpx;
			z-index: 10;
		}
	}

	.cont {
		padding: 30rpx;
		margin-top: -150rpx;
		box-sizing: border-box;
	}

	/deep/.uni-collapse-item__title {
		//border: none !important;
	}

	/deep/.uni-collapse-item__title-box {
		height: 100rpx;
	}

	/deep/.uni-collapse-item__title-text {
		font-size: 26rpx;
		line-height: 1.5;
	}

	.chat-box {
		display: flex;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			//width: 50%;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			position: relative;

			.l {
				width: 80rpx;
				height: 80rpx;
			}

			.c {
				padding: 0 20rpx;
			}

			/deep/contact-button {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 10;
			}
		}
	}

	.tab-box-public {
		border-radius: 20rpx 20rpx 0 0;
		align-items: flex-end !important;
		padding-bottom: 34rpx;
		border-bottom: 1px solid #ebeef5;
		padding-top: 36rpx;

		.tab-item {
			font-weight: bold;
		}

		.tab-img {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 10rpx;
		}
	}

	.detail-box {
		border-radius: 20rpx;
		padding-bottom: 300rpx;
		background: #fff;

		.detail-con {
			padding: 10rpx 30rpx 30rpx;
		}
	}
</style>